<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery简单操作</title>
		<script src="../jquery/jquery-3.7.1.js"></script>
		<script>
			/* 文档加载完成之后执行，不需要考虑代码顺序 */
			$(document).ready(function() {
				/* DOM获取的元素对象和jQuery获取的元素对象结构不同 */
				var p1 = document.getElementById('p1')
				var p = $('#p1')
				console.log($('p')[1]) // 取到的是DOM对象
				console.log($('p').eq(1)) // 取到的jqeury对象
				console.log($('.aaa:eq(1)'))
				/* 函数中传一个参数是获取，传2个参数是设置 */
				$('#p1').attr('title', 'abc')
				$('.aaa').eq(0).css('background-color', '#00F')
								.addClass('bbb')
								.addClass('ccc')
				$('p:last').append("<a href='#'>超链接</a>")
				$('.aaa').eq(0)
				.mouseover(function() {
					$('p:last').hide()
				})
				.mouseout(function() {
					$('p:last').show()
				})
			})
		</script>
	</head>
	<body>
		<p id="p1">第一个p标签</p>
		<p class="aaa">第二个p标签</p>
		<p class="aaa">第三个p标签</p>
	</body>
</html>